<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>非常震撼极具视觉冲击炫酷特效背景动画</title>
</head>

<body>
<script type="text/javascript" src="js/layui/js/chongjishijue/protect.js"></script>
<script src="js/layui/js/chongjishijue/three.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
	gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec4 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
uniform sampler2D u_buffer;
uniform bool u_renderpass;
uniform int u_frame;

#define PI 3.141592653589793
#define TAU 6.283185307179586

const float multiplier = 25.5;

const float zoomSpeed = 3.;
const int layers = 5;

mat2 rotate2d(float _angle){
  return mat2(cos(_angle),sin(_angle),
			  -sin(_angle),cos(_angle));
}

vec2 hash2(vec2 p)
{
vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
return o;
}

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
						 6.0)-3.0)-1.0,
				 0.0,
				 1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}

vec3 domain(vec2 z){
return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));
}
vec3 colour(vec2 z) {
  return domain(z);
}

// The render function is where we render the pattern to be added to the layer
vec3 render(vec2 uv, float scale) {
vec2 id = floor(uv);
vec2 subuv = fract(uv);
vec2 rand = hash2(id);
float bokeh = abs(scale) * 1.;

float particle = 0.;

if(length(rand) > 1.3) {
  vec2 pos = subuv-.5;
  float field = length(pos);
  particle = smoothstep(.7, 0., field);
  particle += smoothstep(.2, 0.2 * bokeh, field);
}
return vec3(particle*2.);
}

vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity) {
vec2 _uv = uv;
// Scale
// Generating a scale value between zero and 1 based on a mod of u_time
// A frequency of 10 dixided by the layer index (10 / layers * layer)
float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);
uv *= 20.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster
uv *= scale*scale; // then modifying the overall scale by the generated amount
// uv *= 1. + ( ( n*.5 ) * ( length(_uv) ) );
// uv += .5*float(layer);
uv = rotate2d(u_time / 10.) * uv; // rotarting
uv += vec2(25. + sin(u_time*.1)*.2) * float(layer); // ofsetting the UV by an arbitrary amount to make the layer appear different

// render
vec3 pass = render(uv * multiplier, scale) * .2; // render the pass

 // this is the opacity of the layer fading in from the "bottom"
opacity = 1. + scale;
float _opacity = opacity;

// pass += n * .5 * mix(vec3(0., .5, 1.5), vec3(1., .5, 0.), opacity);

// This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)
float endOpacity = smoothstep(0., 0.4, scale * -1.);
opacity += endOpacity;

return pass * _opacity * endOpacity;
}

void main() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
vec2 sample = gl_FragCoord.xy / u_resolution.xy;

vec4 fragcolour;

if(u_renderpass == true) {

  if(u_frame > 5) {
	fragcolour = texture2D(u_buffer, sample) * 6.;
	// fragcolour *= pow(fragcolour, vec4(.5));
	// fragcolour *= fragcolour*.2;
  }
  uv *= rotate2d(u_time*.5);

  float opacity = 1.;
  float opacity_sum = 1.;

  for(int i = 1; i <= layers; i++) {
	fragcolour += clamp(vec4(renderLayer(i, layers, uv, opacity), 1.) * 5., 0., 5.);
	opacity_sum += opacity;
  }

  fragcolour *= 1./opacity_sum;
} else {
  fragcolour = texture2D(u_buffer, sample) * 5.;
}

// vec3 fragcolour = colour(uv);

gl_FragColor = fragcolour;
}
</script>


<div id="container" touch-action="none"></div>

<script src="js/layui/js/chongjishijue/index.js"></script>
</body>

</html>
